<template>
  <div class="app-container">
    <el-row >
      <el-col :span="8"><el-button type="primary" @click="getAll()" plain>全部</el-button></el-col>
      <el-col :span="8"><el-button type="primary" @click="getYear()" plain>按年度查询</el-button></el-col>
      <el-col :span="8"><el-button type="primary" @click="getVariety()" plain>按产品查询</el-button></el-col>
    </el-row>

    <el-row v-show="showSearch">
      <el-col>
          <el-date-picker clearable
                          v-model="createTime"
                          @change="getYear(createTime)"
                          value-format="yyyy"
                          type="year"
                          placeholder="请选择创建时间">
          </el-date-picker>
      </el-col>
    </el-row>
    <el-row v-show="showSearch1">
      <el-col>

        <el-select v-model="varietyId" filterable placeholder="请选择"  @change="getVariety(varietyId)">
          <el-option
            v-for="item in optionsVariety"
            :key="item.varietyId"
            :label="item.varietyName"
            :value="item.varietyId">
          </el-option>
        </el-select>

      </el-col>
    </el-row>
    <el-row >
      <el-col :span="12">
        <div v-show="showSearchAll" style="width:500px; height:500px;" ref="main"></div>
        <div v-show="showSearchAll1" style="width:500px; height:500px;" ref="mainAll"></div>
      </el-col>
      <el-col :span="12">
        <div v-show="showSearchAll" style="width:500px; height:500px;" ref="main1"></div>
        <div v-show="showSearchAll1" style="width:500px; height:500px;" ref="main1All"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import {totalByVariety,totalByYear,totalByAll} from "@/api/work/productivity";
import {listVarietyAll} from "@/api/work/variety";

export default {
  name: "dataPro",
  data(){
    return{
      myChart: null,
      myChart1: null,
      dataList: [],
      dataListAll: [],
      dataListAllL: [],
      dataListAllN: [],
      dataListAllNL: [],
      dataListN: [],
      optionsVariety:[],
      timer: null,
      option: null,
      option1: null,
      // 显示搜索条件
      showSearch: false,
      showSearchAll: false,
      showSearchAll1: true,
      showSearch1: false,
      varietyId: null,
      createTime: null,
    }
  },
  created() {
    this.getListAll();
    // this.listByVar();
    // this.listByYear();
    this.listByAll();
  },
  methods:{
    /** 查询品种管理列表 */
    clearData(){
      this.dataList=[];
      this.dataListAll=[];
      this.dataListAllL=[];
      this.dataListAllN=[];
      this. dataListAllNL=[];
      this.dataListN=[];
    },
    getAll(){
      this.clearData();
      this.showSearch=false;
      this.showSearch1=false;
      this.showSearchAll=false;
      this.showSearchAll1=true;
      this.listByYear(null);
    },
    getYear(createTime){
      this.clearData();
      this.showSearch=true;
      this.showSearchAll=true;
      this.showSearch1=false;
      this.showSearchAll1=false;
      this.listByYear(createTime);
    },
    getVariety(id){
      this.clearData();
      this.showSearch=false;
      this.showSearch1=true;
      this.showSearchAll=true;
      this.showSearchAll1=false;
      console.log(id);
      this.listByVar(id);
    },
    getListAll() {
      this.loading = true;
      listVarietyAll().then(response => {
        this.optionsVariety = response.rows;
        this.loading = false;
      });
    },
    listByAll(){
      totalByAll().then(response => {
        const data=response.rows;
        const newdata=[];
        for (let i = 0; i < data.length; i++){
          this.dataListAllN.push(data[i].n);
          let year=data[i].n;
          for (let j = 0; j <data[i].list.length ; j++) {
            const obj={'year':year,'data':data[i].list[j].v,'name':data[i].list[j].n};
            newdata.push(obj);
          }
        }
        if (data.length>0){
          for (let j = 0; j <data[0].list.length ; j++) {
            const newdataAll=[];
            for (let z = 0; z < newdata.length; z++) {
              if (data[0].list[j].n==newdata[z].name){
                newdataAll.push(newdata[z].data);
              }
            }
            let pp={ name:data[0].list[j].n, type: 'bar', barGap: 0, emphasis: {focus: 'series'}, data: newdataAll};
            let ppl={ name:data[0].list[j].n, type: 'line', stack: 'Total',  data: newdataAll};
            this.dataListAll.push(pp);
            this.dataListAllL.push(ppl);
            this.dataListAllNL.push(data[0].list[j].n)
          }
        }
        this.showEcharts2();
        this.showEcharts3();
      });

    },
    listByVar(id){
      totalByVariety(id).then(response => {
        const data=response.rows;
        this.dataList=[];
        this.dataListN=[];
        for (let i = 0; i < data.length; i++){
          this.dataList.push(data[i].v);
          this.dataListN.push(data[i].n);
        }
        this.showEcharts();
        this.showEcharts1();
      });

    },
    listByYear(createTime){
      totalByYear(createTime).then(response => {
        this.dataList=[];
        this.dataListN=[];
        const data=response.rows;
        for (let i = 0; i < data.length; i++){
          this.dataList.push( data[i].v);
          this.dataListN.push(data[i].n);
        }
        this.showEcharts();
        this.showEcharts1();
      });
    },
    showEcharts(){
      this.myChart = echarts.init(this.$refs.main);
      this.option = {
        xAxis: {
          type: 'category',
          data: this.dataListN
        },
        tooltip: { trigger: 'axis',axisPointer: {
            type: 'shadow'
          }},
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.dataList,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      this.myChart.setOption(this.option);

    },
    showEcharts1(){
      this.myChart1 = echarts.init(this.$refs.main1);
      this.option1 = {
        title: {
          text: ''
        },
        tooltip: { trigger: 'axis'},
        xAxis: {
          data: this.dataListN
        },
        yAxis: {},
        series: [
          {
            name: '产量',
            type: 'line',
            data: this.dataList,
            smooth: true
          }
        ]
      }
      this.myChart1.setOption(this.option1);

    },
    showEcharts2(){
      this.myChart = echarts.init(this.$refs.mainAll);
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom:0,
          data: this.dataListAllNL
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.dataListAllN
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.dataListAll
      };
      this.myChart.setOption(this.option);
    },
    showEcharts3(){
      this.myChart1 = echarts.init(this.$refs.main1All);
      this.option1 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom:0,
          data: this.dataListAllNL
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dataListAllN
        },
        yAxis: {
          type: 'value'
        },
        series:this.dataListAllL
      };
      this.myChart1.setOption(this.option1);
    }
  },
  mounted(){
    // this.showEcharts();
    this.showEcharts3();
    this.showEcharts2();
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
